<template>
	<div class="brace-main">
		<div class="brace-main-head">
			<div class="brace-main-head-div">
				<div class="text-center">
					<span class="brace-time-name">第{{step}}步牙套</span>
				</div>
				<div class="text-center">
					<span @click="jumpAll" class="brace-all-time">全部周期</span>
				</div>
			</div>
			<div class="brace-main-head-div">
				<div id="progress" class="text-center relative">
					<progress-bar type="circle" ref="circle" :options="options"></progress-bar>
					<div class="progress-text">
						<div class="progress-text-one">
							<span class="progress-text-num">{{day_count}}</span>
							<span>天</span>
							<div class="progress-text-two">已佩戴</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="brace-main-mid">
			<div class="brace-main-mid-sorll">
				<div class="brace-mid-time">
					<span>小时</span>
					<span v-for="day in step_list">{{day.hour}}</span>
					<div class="clearfix">

					</div>
				</div>
				<div class="brace-mid-map">
					<div><span></span></div>
					<div v-for="(day,index) in step_list" @click="select(day.id, index)" :class="{selected: day.id == day_id}">
						<span class="cell" v-bind:style="{ height: 170/24*(day.hour>24?24:day.hour) + 'px' }"></span>
						<span class="time">{{day.record_date}}</span>
					</div>
					<div @click="editShow" class="addtime">
						<i class="fa fa-plus"></i>
					</div>
				</div>
				<div class="brace-mid-day">
					<span>天数</span>
					<span v-for="(day,index) in step_list">{{index + 1}}</span>
					<div class="clearfix">

					</div>
				</div>
			</div>
		</div>
		<div class="brace-main-foot" v-for="(day,index) in step_list" v-if="day.id == day_id">
			<div class="brace-main-foot-div">
				<div class="">
					第{{step}}步牙套的第{{index+1}}天
				</div>
				<div class="">
					已佩戴{{day.hour}}小时
				</div>
			</div>
			<div class="">
				<span @click="editShow" class="change-brace-time">修改记录</span>
			</div>
		</div>
		<!--修改记录弹窗-->
		<div @click="editHide" class="edit-black"></div>
		<div class="edit-plan">
			<div class="edit-plan-c">
				<header class="edit-plan-header">
					第{{step}}步牙套的第{{day+1}}天
				</header>
				<div class="edit-plan-main">
					<div class="edit-plan-main-c">
						<span>当前日期:</span>
						<input v-model="record_date" class="edit-today" type="text" name="" id="record_date" value="" />
					</div>
					<div class="edit-plan-main-c">
						<span>佩戴时长:</span>
						<input v-model="hour" class="edit-time" type="number" name="" id="" value="" />
						<span>小时</span>
					</div>
				</div>
				<footer class="edit-plan-footer">
					<span @click="editHide">取消</span>
					<span @click="saveHide">保存</span>
				</footer>
			</div>
		</div>
	</div>
</template>

<script>
	import { formatDate } from '@/util/date'
	import BaseHeader from "@/components/common/BaseHeader"
	import mobiscroll from "../../../static/Mobiscroll/js/mobiscroll.custom-3.0.0-beta6.min.js"
	import Loading from "@/components/common/Loading"
	export default {
		props: ['plan_id', 'step', 'steps_days'],
		components: {
			BaseHeader,
			Loading
		},
		filters: {
			//时间格式过滤器
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'MM-dd')
			}
		},
		data() {
			return {
				uid: '',
				token: '',
				day_id: '',
				day: '',
				record_date: '',
				hour: '',
				step_list: [],
				day_total: '',
				day_count: '',
				options: {
					color: '#33B58F',
					strokeWidth: 10,
					trailWidth: 10,
					trailColor: '#252525',
				},
				isloading: true
			}
		},
		mounted() {
			this.uid = localStorage.getItem('uid');
			this.token = localStorage.getItem('token');
			console.log(this.step);
			this.getPlanD();
			var self = this;
			$('#record_date').mobiscroll().date({
				theme: 'mobiscroll',
				lang: 'zh',
				display: 'bottom',
				onClose: function(textVale, inst) { //插件效果退出时执行 inst:表示点击的状态反馈：set/cancel
					self.record_date = textVale.valueText;
				}
			});
		},
		methods: {
			//获取牙套计划详情
			getPlanD() {
				var self = this;
				var data = {
					uid: self.uid,
					token: self.token,
					plan_id: self.plan_id,
					step_number: self.step
				};
				$.post(global.domain + global.API.braces_plan_details_step, data, function(msg) {
					self.isloading = false;
					self.$emit('hideLoad', false); //主动触发upup方法，'hehe'为向父组件传递的数据
					if(msg.error == 0) {
						self.step_list = msg.data;
						self.day_count = msg.day_count;
						self.day_total = msg.day_total;
						var n = self.day_count / self.steps_days;
						console.log(n);
						if(n > 1) n = 1;
						self.$refs.circle.animate(n);
						var sum = msg.data.length;
						console.log(sum);
						var minw = $(window).width();
						var w = (sum + 1) * 40 + 52;
						$('.brace-main-mid-sorll').css('min-width', (minw - 20) + 'px');
						$('.brace-main-mid-sorll').css('width', w + 'px');
					} else {
						console.log(msg.error);
						if(msg.is_auth == 0) {
							localStorage.clear();
							self.$router.push({
								path: '/login'
							});
						}
					}
				}, 'json');
			},
			//选择天数
			select(i, n) {
				this.day_id = i;
				this.day = n;
			},
			//修改记录弹窗
			editShow() {
				$(".edit-black").show();
				$(".edit-plan").show();
			},
			//修改记录弹窗
			editHide() {
				$(".edit-black").hide();
				$(".edit-plan").hide();
			},
			//保存记录
			saveHide() {
				//				if(this.hour > 24 || this.hour < 0) {
				//					alert("时间不对");
				//					this.hour = '';
				//					return;
				//				}
				var self = this;
				var data = {
					uid: self.uid,
					token: self.token,
					plan_id: self.plan_id,
					step_number: self.step,
					hour: self.hour,
					id: self.day_id,
					record_date: self.record_date
				};
				$.post(global.domain + global.API.braces_plan_details_save, data, function(msg) {
					if(msg.error == 0) {
						self.record_date = '';
						self.hour = '';
						self.editHide();
						self.getPlanD();
					} else {
						console.log(msg.error);
						if(msg.is_auth == 0) {
							localStorage.clear();
							self.$router.push({
								path: '/login'
							});
						}
					}
				}, 'json');
			},
			//跳转到全部周期
			jumpAll() {
				this.$router.push({
					name: 'BraceTimeList',
					params: {
						pid: this.plan_id
					}
				});
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import "../../style/brace.css";
	.brace-mid-day {
		padding-bottom: 40px;
	}
	
	.progress-text {
		position: absolute;
		width: 100%;
		top: 50%;
		margin-top: -31px;
	}
	
	.progress-text-num {
		font-size: 32px;
	}
	
	.progress-text-two {
		font-size: 12px;
	}
	
	.loading {
		line-height: 170px;
	}
	.loading-img{
		width: 20px;
	}
</style>